<template>
	<!-- 展馆 -->
	<view class="">
		<view class="bg-white px-2">
			<view class="child_box flex">
				<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont">
					<view
						class="child_item font_24 mr-3"
						v-for="(child, index) of tabList"
						:key="child.id"
						:class="{ child_active: tabCur == index }"
						@click="tabChange(child, index)"
					>
						{{ child.title }}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="child_tab flex align-center justify-betwee">
			<scroll-view
				class="scroll_cont ml-1"
				:class="{ scroll_width: childTabList.length > 12 }"
				scroll-x="true"
				:scroll-left="scrollLeft"
				:scroll-into-view="childInto"
				:scroll-with-animation="true"
				@scrolltoupper="scrolltoupper"
				@scrolltolower="scrolltolower"
			>
				<text
					class="font_22 pr-3"
					v-for="(item, index) in childTabList"
					:key="index"
					:id="'child' + item.id"
					@click="childTabChange(item, index)"
					:class="{ c_main: childCur == index }"
				>
					{{ item.title }}
				</text>
			</scroll-view>
			<view class="px-2" v-if="childTabList.length > 12" @click="scrollRight">
				<u-icon v-if="derection == 'left'" name="play-right-fill" color="#666666" size="10"></u-icon>
				<u-icon v-else name="play-left-fill" color="#666666" size="10"></u-icon>
			</view>
		</view>
		<view class="bg-white py-2 px-4"><search-view :searchVal="searchVal" @search="searchChange" @clear="searchChange('')"></search-view></view>
		<view v-if="list.length <= 0" class="p-2 mt-3" style="margin: 100rpx auto;">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无展馆信息"></u-empty>
		</view>
		<view v-else class="mt-2 container">
			<company-list :list="list" check-types="qy" :exhibition-id="exhibitionId"></company-list>
			<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
		</view>
		<view class="pt-3">
			<button class="login_btn" @getphonenumber="authLogin" :open-type="opentype()">
				<view class="fixed-bottom py-1 shadow bg_main text-white text-center font_24" @click="toAdd">没有我的企业,马上添加</view>
			</button>
		</view>
	</view>
</template>

<script>
import { exhibiTab, exhibiList } from '@/api/home/gallery.js';
import companyList from '@/components/company_list.vue';
import searchView from '@/components/search/search.vue';
export default {
	components: {
		companyList,
		searchView
	},
	data() {
		return {
			tabList: [],
			childTabList: [],
			tabCur: 0,
			childCur: 0,
			parendId: 0, //一级分类id
			childId: 0, //二级分类id
			childInto: '',
			scrollLeft: 0,
			derection: 'left',
			list: [],
			exhibitionId: '',
			status: 'loadmore',
			page: 1, //页数
			suo: true,
			searchV: '', //搜索框内容
			searchVal: ''
		};
	},
	computed: {
		opentype() {
			return function(val) {
				return !uni.getStorageSync('userInfo').hasLogin ? 'getPhoneNumber' : '';
			};
		}
	},
	onLoad(option) {
		console.log(option);
		this.exhibitionId = option.exhibitionId; //展会id
		this.tabCur = Number(option.idx) + 1; //跳转对应tab
		this.parendId = option.parendId;
		this.getInfo();
		// 地图进入
		this.childId = option.childId ? option.childId : '';
		this.childCur = option.childIdx ? Number(option.childIdx) + 1 : 0;

		if (option.searchV) {
			this.searchVal = option.searchV;
			this.searchChange(option.searchV);
			return;
		}
		this.getList();
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			this.getList();
		}
	},
	methods: {
		reset() {
			this.page = 1;
			this.list = [];
		},
		// 搜索框内容
		searchChange(value) {
			this.searchV = value;
			this.reset();
			this.getList();
		},
		// 获取tab
		getInfo() {
			exhibiTab({ id: this.exhibitionId })
				.then(res => {
					if (res.code == 0) {
						this.tabList = [{ title: '全部', id: 0, lower_level: [] }, ...res.data.datatwo];
						this.childTabList = [{ title: '全部', id: 0 }, ...this.tabList[this.tabCur].lower_level];
						this.$nextTick(() => {
							this.childInto = 'child' + this.childId;
						});
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取展馆tab失败', err);
				});
		},
		//一级菜单点击
		tabChange(val, idx) {
			this.tabCur = idx;
			this.parendId = val.id;
			this.childTabList = [{ title: '全部', id: 0 }, ...val.lower_level];
			this.childCur = 0;
			this.childId = 0;
			this.reset();
			this.getList();
		},
		// 展馆点击 二级菜单点击
		childTabChange(val, idx) {
			this.childCur = idx;
			this.childId = val.id;
			// this.$nextTick(() => {
			// 	this.childInto = 'child' + val.id;
			// });
			this.reset();
			this.getList();
		},
		// 获取展馆列表
		getList() {
			exhibiList({
				pid: this.parendId || 0,
				id: this.childId || 0,
				uid: uni.getStorageSync('userInfo').userId || '',
				page: this.page,
				kw: this.searchV,
				zhanhui_id: this.exhibitionId
			})
				.then(res => {
					if (res.code == 0) {
						this.list.push(...res.data);
						if (res.data.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (res.data.length < 10) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					// console.log('获取展馆列表失败', err);
				});
		},
		// 点击添加企业未登录先拉起登录后再跳转
		authLogin(e) {
			if (uni.getStorageSync('userInfo').hasLogin) return;
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.getLogin(e.detail.code)
					.then(res => {
						uni.$u.toast('授权登录成功');
						this.toAdd();
					})
					.catch(err => {
						console.log('登录失败');
					});
			} else {
				uni.showToast({
					title: '授权失败,请登录后查看',
					icon: 'none'
				});
			}
		},
		toAdd() {
			if (!uni.getStorageSync('userInfo').hasLogin) return;
			let url = 'https://forms.solarbe.com/questionnaire/index.html?mid=168';
			this.goPages('/subPages/web_view_h5/index?url=' + encodeURIComponent(url) + '&title=添加企业');
		},
		// 展位-导航滚动
		scrollRight() {
			if (this.derection === 'left') {
				this.scrollLeft = 100;
			} else {
				this.scrollLeft = 0;
			}
		},
		// 滚动到左边
		scrolltoupper(e) {
			// console.log('左边', e);
			this.scrollLeft = 0;
			this.derection = e.detail.direction;
			// console.log('左边', this.derection);
		},
		// 滚动到右边
		scrolltolower(e) {
			// console.log('右边', e);
			this.scrollLeft = 100;
			this.derection = e.detail.direction;
			// console.log('右边', this.derection);
		}
	}
};
</script>

<style lang="scss" scoped>
.parent_box {
	text {
		width: calc((100% / 2) - 10rpx);
		height: 56rpx;
		line-height: 56rpx;
		background: #d3d3d3;
		border-radius: 14rpx;
	}
}

.child_box {
	padding-top: 20rpx;

	.child_item {
		display: inline-block;
		height: 60rpx;
	}

	.child_active {
		color: $color14;
		font-size: 36rpx;
		font-weight: 700;
		border-bottom: 3px solid $color14;
		transition: color 0.2s;
	}

	.scroll_cont {
		white-space: nowrap;
		width: 100%;
	}
}

.top_label {
	width: 100%;

	text {
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
	}

	.tit {
		width: calc(100% - 125rpx);
	}

	.more {
		width: 112rpx;
		background-color: #d3d3d3;
	}
}

.cont_item:last-child {
	border: 0;
}

.cont_item {
	border-bottom: 1px solid #d9d9d9;

	.cont_img {
		margin-right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		border: 1px solid #f2f2f2;
	}

	.hot_num {
		line-height: 42rpx;

		image {
			width: 21rpx;
			height: 26rpx;
			display: inline;
			margin-right: 5rpx;
			margin-top: 10rpx;
		}
	}
}

.child_tab {
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #e5e5e5;
	.scroll_cont {
		white-space: nowrap;
	}
	.scroll_width {
		width: 91%;
	}
}
</style>
